<template>
  <div class="manage">
    <el-upload
      :multiple="false"
      :show-file-list="false"
      accept=".csv"
      action
      :http-request="uploadCSV"
    >
      <background-btn
        normal-img="fn_1.png"
        hover-img="fn_1_h.png"
        title="上传CSV"
      ></background-btn>
    </el-upload>
    <background-btn
      normal-img="fn_2.png"
      hover-img="fn_2_h.png"
      title="生成当地居民列表"
      @click.native="handleLocalList"
    ></background-btn>
    <background-btn
      normal-img="fn_3.png"
      hover-img="fn_3_h.png"
      title="生成预测模型"
      @click.native="handleOpenPicker"
    ></background-btn>
    <el-dialog :visible.sync="pickDialogVisible" width="40%" center :close-on-click-modal="false">
      <div class="pick-box">
        <el-date-picker
          class="date-picker"
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-select
          v-model="timeValue"
          placeholder="请选择时间粒度"
          class="time-picker"
          popper-class="select-popper">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select
          v-model="typeValue"
          placeholder="请选择流量类型"
          class="type-picker"
          popper-class="select-popper">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePredict">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="mdDialogVisible" width="30%" center :close-on-click-modal="false">
      <VueMarkdown :source="value" style="color: rgb(255, 255, 255) !important;"></VueMarkdown>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="mdDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { upload, queryTask, generateLocalList, adminGeneratePredictModel } from '@/api/manage.js'
import VueMarkdown from 'vue-markdown'
import BackgroundBtn from '@/components/BackgroundBtn/index.vue'
import commonDataMixin from '@/mixins/commonDataMixin'

export default {
  name: 'Manage',
  components: {
    BackgroundBtn,
    VueMarkdown
  },
  mixins: [commonDataMixin],
  data () {
    return {
      mdDialogVisible: false,
      pickDialogVisible: false,
      value: '正在启动任务',
      timer: null,
      timeOptions: [
        {
          value: 5,
          label: '5s'
        },
        {
          value: 10,
          label: '10s'
        },
        {
          value: 30,
          label: '30s'
        },
        {
          value: 60,
          label: '60s'
        },
        {
          value: 1200,
          label: '1200s'
        },
        {
          value: 3600,
          label: '3600s'
        },
        {
          value: 86400,
          label: '86400ms'
        }
      ],
      timeValue: null
    }
  },
  methods: {
    uploadCSV (fileObj) {
      const formData = new FormData()
      formData.set('file1', fileObj.file)
      this.value = '正在启动任务'
      this.mdDialogVisible = true
      upload(formData).then((res) => {
        this.timer = setInterval(() => {
          this.queryTaskProgress(res.data.taskid)
        }, 1000)
      })
    },
    // 生成当地居民列表
    handleLocalList () {
      generateLocalList().then(res => {
        this.value = '正在启动任务'
        this.mdDialogVisible = true
        if (res.data.taskid) {
          this.timer = setInterval(() => {
            this.queryTaskProgress(res.data.taskid)
          }, 1000)
        }
      })
    },
    // 打开选择器的模态框
    handleOpenPicker () {
      this.pickDialogVisible = true
    },
    // 发送训练模型
    handlePredict () {
      if (this.dateValue && this.timeValue != null && this.typeValue != null) {
        const dateValue = this.convertDateToStr(this.dateValue)
        const typeValue = this.typeValue
        const timeValue = this.timeValue
        const options = {
          startTime: dateValue[0],
          endTime: dateValue[1],
          splitTime: timeValue,
          area: 0,
          test_size: 0.3,
          data: typeValue
        }
        adminGeneratePredictModel(options).then(res => {
          this.pickDialogVisible = false
          this.value = '正在启动任务'
          this.mdDialogVisible = true
          if (res.data.taskid) {
            this.timer = setInterval(() => {
              this.queryTaskProgress(res.data.taskid)
            }, 1000)
          }
        })
      } else {
        this.$message.error('请选择完毕后再进行生成操作！')
      }
    },
    // 查询异步任务进度
    queryTaskProgress (id) {
      queryTask(id).then((res) => {
        this.value = res.data.task.des
        if (res.data.task.status === 2 || res.data.task.progress === 1) {
          clearInterval(this.timer)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .manage {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }

  .pick-box {
    display: flex;
    flex-direction: column;
    height: 36rem;
    justify-content: space-around;
  }
</style>
